iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
0
Modern Web

使用 Django 開發網頁系統系列 第 13

[Day 13] 顯示訊息 messages framework+重構程式(extends templates)

  • 分享至 

  • xImage
  •  

今天是這一年的最後一天

今天聊聊 顯示訊息 messages framework

在新增資料的時候,要顯示 "新增成功" 訊息,
以前在做跨頁面顯示,可能要使用GET + 參數 ?msg=新增成功 或寫 session or cookies

django 有 messages 功能
https://docs.djangoproject.com/en/2.0/ref/contrib/messages/
有分級tag: info, success, warning error,可以運用在顯示上
可能success就是綠色背景、warning黃色 等等

store/views.py

from django.contrib import messages
def categoryCreate(request):
        ...
        categoryForm.save()
        messages.success(request, '新增成功')
        return redirect(reverse('store:category'))

放在要顯示的html
store/templates/store/category.html

...
<body>
{% if messages %}
  <div>
  {% for message in messages %}
    <div {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message.tags }}-{{ message }}</div>
  {% endfor %}
  </div>
{% endif %}
...

就可以顯示訊息了

但是如果其他頁面也要顯示訊息,就要複製同樣的程式碼了
還有我們寫了一些 html 檔案,有一些地方是重複的 doctype, head ...
可以往上提到一個檔案,放在 main/base.html
其他頁去繼承base.html

{% block content %}
{% endblock %}
定義一個區塊叫 content

未來可能會有 javascript 部分, css, title 樣式 等等。 都可以再多定義

main/templates/main/base.html

<!doctype html>
<html>
<head>

</head>
<body>
{% if messages %}
  <div>
    {% for message in messages %}
      <div {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message.tags }}-{{ message }}</div>
    {% endfor %}
  </div>
{% endif %}

{% block content %}
{% endblock %}

</body>
</html>

{% extends 'main/base.html' %}
{% block content %}
...
{% endblock %}
一樣的都刪掉只留內容
使用 extends 繼承父頁面 修改 content 區塊

store/templates/store/category.html

{% extends 'main/base.html' %}
{% block content %}
  <table>
    <tr>
      <th>類別</th>
    </tr>
    {% for category in categorys %}
      <tr>
        <td>{{ category.name }}</td>
      </tr>
    {% endfor %}
  </table>
{% endblock %}

store/templates/store/categoryCategory.html

{% extends 'main/base.html' %}
{% block content %}
  <h3>新增類別</h3>
  <form method="post" action="{% url 'store:categoryCreate' %}">
    {% csrf_token %}
    {{ categoryForm.as_p }}

    <input type="submit" value="儲存">
  </form>
{% endblock %}

未來新增頁面,如果都是基於首頁的話 都可以這樣使用
或是以後會有導覽列目錄(nav),直接寫在main/base.html 其他就可以跟著有了


上一篇
[Day 12] 重構程式(route variable)
下一篇
[Day 15] 修改資料
系列文
使用 Django 開發網頁系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言